웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

[자바스크립트] 배열값 중 일부 삭제 또는 둘로 나누는 방법, splice 함수

Last Modified : 2016-07-05 / Created : 2016-07-05
14,167
View Count
자바스크립트에서 배열을 선언한 후 일부 배열을 삭제 또는 전체 배열을 삭제하는 방법에 대하여 알아보려고 합니다. 배열을 잘라내는 함수로 splice()를 사용할 수 있습니다. 또한 splice() 함수는 삭제뿐만 아니라 새로운 배열값을 원하는위치에 추가하는 것도 역시 가능합니다. 그럼 아래의 예제를 확인해보시기 바랍니다.


[ 1 ] 배열 제거 또는 추가 함수, splice()


splice() 함수를 사용하면 원하는 배열에서 원하는 부분을 제거할 수 있습니다. 배열의 일부를 제거하기 위해 많이 사용되지만 splice() 함수는 하나의 배열을 두개로 나눈다고 생각하시면 쉽게 이해가 되실겁니다.

<script type="text/script">
var test1 = new Array("a", "b", "c", "d");
var test2 = test1.splice(1, 2);
// 1번의 순서부터 모두 2개를 제거함
</script>



/* test1 배열값 */
a, d

/* test2 배열값 */
b, c


! 예제 설명


예제의 주석에는 1번의 순서부터 2개를 제거한다고 했습니다. 다른 말로 바꾸어 말하면 잘라서 다른 배열, 즉 test2로 가져온다고 생각하시면 됩니다. 다시말해 위와 같이 실행하면 기존의 test1은 a와 d의 값을... test2는 새롭게 b와 c를 가지게 됩니다.



# splice() 함수를 사용해 배열을 추가하는 방법


splice() 함수는 배열을 제거하는 것 외에도 원하는 위치에 추가할 수 있습니다. 만약 아래와 같은 배열이 존재하며 이때 새로운 값을 추가하려면 다음과 같이 사용할 수 있습니다.

<script>
   urlname = ['web', 'is', 'com'];
   urlname.splice(2, 0, 'free');
   // 2번째 다음에 새로운 값을 추가함

   console.log(urlname);
</script>

위 스크립트를 실행하면 그 결과는 어떻게 될까요? 2번째 해당하는 위치에 새로운 배열값 free가 추가되어 아래와 같이 총 4개의 배열값을 반환하게 됩니다. 이처럼 splice() 함수는 배열을 추가하는 것도 역시 가능합니다.

['web', 'is', 'free', 'com']
// 배열이 추가된 결과


[ 2 ] 또 다른 배열 제거 방법


앞에 사용한 배열 추가 방법도 간단하지만 단순하게 원하는 배열을 선택할 경우 어려울 수 있습니다. 이보다 length를 사용한 방법은 연속된 배열의 길이를 선택하거나 잘라내는데 더 용이할 수 있습니다. 예를 들면... 만약 test3의 배열의 길이가 4개이고 앞에서 부터 2개의 배열값을 갖게 하려면 아래와 같이 코드를 사용할 수 있습니다.

<script type="text/script">
var test3 = new Array("a", "b", "c", "d");
test3.length = 2;
</script>



/* test3 배열값 */
a, b


보시다시피 length를 이용하면 원하는 값을 선택할 수는 없지만 훨씬 간단하게 선택한 숫자만큼만 가져오므로 배열의 뒷부분은 제거할 수 있습니다^^

Previous

[JavaScript] 함수의 예약어 return이란 ?

Previous

[자바스크립트] jQuery 마우스의 위치, 좌표 확인, event()